<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="用户名称" prop="UserName">
            <el-input v-model="ruleForm.UserName" />
        </el-form-item>
        <el-form-item label="部门" prop="DeptId">
            <el-select v-model="ruleForm.DeptId" placeholder="请选择部门" :options="optionsDect">
                <el-option v-for=" item in optionsDect" :key="item.Id" :label="item.DictName"
                    :value="parseInt(item.DictValue)">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="Sex">
            <el-radio-group v-model="ruleForm.Sex">
                <el-radio value="男">男</el-radio>
                <el-radio value="女">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="Tel">
            <el-input v-model="ruleForm.Tel" />
        </el-form-item>
        <el-form-item label="邮箱" prop="Email">
            <el-input v-model="ruleForm.Email" />
        </el-form-item>
        <el-form-item label="身份证" prop="IdCard">
            <el-input v-model="ruleForm.IdCard" />
        </el-form-item>

        <el-form-item label="状态" prop="Status">
            <el-select v-model="ruleForm.Status" placeholder="请选择状态" :options="optionsStatus">

                <el-option v-for=" item in optionsStatus" :key="item.Id" :label="item.DictName"
                    :value="parseInt(item.DictValue)">

                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>

</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'

import userapi from "../../api/userinfoapi"
import dictapi from "../../api/dictinfoapi"
const props = defineProps({
    Id: Number,
});
const emit = defineEmits(['onSave'])

interface RuleForm {
        UserName: string
        Sex: string
        Tel: string
        Email: string
        DeptId: number
        IdCard: string
        Status: number

}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
        UserName: '',
        Sex: '女',
        Tel: '',
        Email: '',
        DeptId: 2,
        IdCard: '',
        Status: 1,

})

const rules = reactive<FormRules<RuleForm>>({
    UserName: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
        { min: 2, max: 5, message: '2-5个字符', trigger: 'blur' },
    ],
    Sex: [
        {}
    ],
    Tel: [
        {
            required: true,
            message: '请输入电话',
            trigger: 'blur',
        },
    ],
    Email: [
        {
            type: 'string',
            required: true,
            message: '请输入邮箱地址',
            trigger: 'blur',
        },
    ],

})
const optionsStatus = ref<any>([
])
dictapi.TypeName('常规状态').then((res:any) => {
    console.log("res", res.data)
    optionsStatus.value = res.data
})

const optionsDect = ref<any>([
])
dictapi.TypeName('部门').then((res:any) => {
    console.log("res", res.data)
    optionsDect.value = res.data
})

const getData = () => {
    userapi.get(props.Id!).then(res => {
        console.log("aaa=", res.data);
        ruleForm.value = res.data
    })
}
onMounted(() => {
    getData();
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("ruleForm.data", ruleForm.value)

            userapi.put(ruleForm.value).then((res:any) => {
                console.log("rws",res)
                if (res.code == 1) {
                    ElNotification({
                        title: 'Success',
                        message: '修改成功',
                        type: 'success',
                        duration: 800,
                        onClose: () => {
                            emit("onSave", true)
                        }
                    })
                } else {
                    ElNotification({
                        title: 'Error',
                        message: '失败',
                        type: 'error',
                        duration: 800,
                    })
                }
            }).catch((err:any) => {
                ElNotification({
                    title: 'Error',
                    message: '失败',
                    type: 'error',
                    duration: 800,
                })
                console.log("err",err)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>